<template>
	<div class="app-container">
		<!--工具栏-->
		<div class="head-container">
			<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
			<crudOperation :permission="permission" />
			<!--表单组件-->
			<el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
				:title="crud.status.title" width="700px">
				<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="80px">
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" style="width: 560px;" />
					</el-form-item>
					<el-form-item label="开课时间">
						<el-date-picker v-model="form.startDate" type="datetime" style="width: 230px;" />
					</el-form-item>
					<el-form-item label="结课时间">
						<el-date-picker v-model="form.endDate" type="datetime" style="width: 230px;" />
					</el-form-item>
					<el-form-item label="总学时">
						<el-input v-model="form.totalHours" style="width: 230px;" />
					</el-form-item>
					<el-form-item label="状态" prop="enabled" style="width: 270px;">
					  <el-radio v-for="item in dict.data_status" :key="item.id" v-model="form.enabled" :label="item.value">{{ item.label }}</el-radio>
					</el-form-item>
					<el-form-item label="培训内容">
						<el-input v-model="form.content" :rows="3" type="textarea" style="width: 560px;" />
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="form.remark" :rows="3" type="textarea" style="width: 560px;" />
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="text" @click="crud.cancelCU">取消</el-button>
					<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
				</div>
			</el-dialog>
			<!--表格渲染-->
			<el-table ref="table" v-loading="crud.loading" size="small" style="width: 100%;" :data="crud.data"
      row-key="periodId"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
				@selection-change="crud.selectionChangeHandler">
				<el-table-column :selectable="checkboxT" type="selection" width="55" />
				<el-table-column prop="name" label="名称" width="300" />
				<!-- <el-table-column prop="content" label="培训内容" /> -->
				<el-table-column prop="startDate" label="开课时间" width="140" />
				<el-table-column prop="endDate" label="结课时间" width="140" />
				<el-table-column prop="totalHours" label="总学时" width="100" />
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="状态" align="center" prop="enabled">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.enabled" active-color="#409EFF"
							inactive-color="#F56C6C" @change="changeEnabled(scope.row, scope.row.enabled,)" />
					</template>
				</el-table-column>
				<el-table-column v-if="checkPer(['admin','period:edit','period:del'])" label="操作" width="150px"
					align="center">
					<template slot-scope="scope">
						<udOperation :data="scope.row" :permission="permission" />
					</template>
				</el-table-column>
			</el-table>
			<!--分页组件-->
			<pagination />
		</div>
	</div>
</template>

<script>
	import crudPeriod from '@/api/period'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'

	const defaultForm = {
		periodId: null,
		name: null,
		content: null,
		startDate: null,
		endDate: null,
		totalHours: null,
		remark: null,
		enabled: 'true'
	}
	export default {
		name: 'Period',
		components: {
			pagination,
			crudOperation,
			rrOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['data_status'],
		cruds() {
			return CRUD({
				title: '培训期次',
				url: 'api/period',
				idField: 'periodId',
				sort: 'periodId,desc',
				crudMethod: {
					...crudPeriod
				}
			})
		},
		data() {
			return {
				permission: {
					add: ['admin', 'period:add'],
					edit: ['admin', 'period:edit'],
					del: ['admin', 'period:del']
				},
				rules: {
					name: [{
						required: true,
						message: '名称不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 新增与编辑前做的操作
			[CRUD.HOOK.afterToCU](crud, form) {
				form.enabled = `${form.enabled}`
			},
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				return true
			},
			// 改变状态
			changeEnabled(data, val) {
				this.$confirm('此操作将 "' + this.dict.label.data_status[val] + '" ' + data.name + '培训期次, 是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					crudPeriod.edit(data).then(res => {
						this.crud.notify(this.dict.label.data_status[val] + '成功', CRUD.NOTIFICATION_TYPE
							.SUCCESS)
					}).catch(err => {
						data.enabled = !data.enabled
						console.log(err.response.data.message)
					})
				}).catch(() => {
					data.enabled = !data.enabled
				})
			},
			checkboxT(row, rowIndex) {
			  return row.id !== 1
			}
		}
	}
</script>

<style scoped>

</style>
